<template>
  <div class="recordTable-containner">
    <div class="tableSearch">
      <el-form :inline="true"  class="demo-form-inline"  size="mini" >
        <el-form-item label="接收人:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="事件源:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="value5" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info"  >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div  class="tableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;min-height:500px; "
        :header-cell-style="{background:'#D8DEE8'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination :current-page="ListQuery.page" :page-sizes="[5, 10, 20, 50]" :page-size="ListQuery.limit" background layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: '李四',
        // 下拉
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value5: [],
        // 时间
        value1: '',
        cols: [
          { prop: 'date', label: '发送时间', width: '190px', sortable: true },
          { prop: 'name', label: '发送方式', width: '200px', sortable: true },
          { prop: 'address', label: '事件源', width: '290px' },
          { prop: 'address', label: '事件描述' },
          { prop: 'address', label: '接收人', width: '270px' },
          { prop: 'address', label: '状态', width: '180px', sortable: true }
        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀',
          hello: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }

        ],
        indexMethod: '',
        currentPage4: {
          page: 1
        },
        total: 0,
        ListQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    method: {
      handleSizeChange(val) {
        this.ListQuery.limit = val
      },
      handleCurrentChange(val) {
        this.ListQuery.page = val
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .recordTable-containner{
    width: 100%;
    min-height: 500px;
    .tableSearch{
      width: 100%;
      height: 55px;
      background-color: #F0F3F5;
      font-size:14px;
      font-weight:400;
      line-height: 20px;
      padding: 15px 20px  0px 20px;
      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        /*padding-top: 10px;*/
      }


    }
    .tableList{
      width: 100%;
      min-height:20vw;
    }
    .footerPage{
      float: right;
      right:20px;
      position: relative;
    }


  }
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }
  /deep/  .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/ .el-table--border th, .el-table__fixed-right-patch{
    padding: 3px 0;
  }
 /deep/ .el-form-item--mini .el-form-item__label{
   font-weight: normal;
   color: #69727E;
 }
</style>
